<template>
    <u-col>
        <v-app-bar color="white" flat app hide-on-scroll>
            <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
            <v-toolbar-title>处对象</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn icon to="/talkAdd">
                <v-icon>add_box</v-icon>
            </v-btn>
        </v-app-bar>
        <v-navigation-drawer v-model="drawer" app temporary>
            <v-list>
                <v-list-item
                        v-for="item in vueList"
                        link
                        to="/report"
                >
                    <!--<v-list-item-icon>
                        <v-icon>{{ item.icon }}</v-icon>
                    </v-list-item-icon>-->
                    <v-list-item-content>
                        <v-list-item-title>{{ item }}</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>
        <v-divider></v-divider>

        <v-card flat class="row-center" v-if="unreadNotifies[0]">
            <v-card-title>
                <v-card flat color="warning" @click="toNotifyVue">
                    <v-list-item>
                        <v-list-item-avatar tile size="40">
                            <!--        @click="toUserDetail(talk.user.id)"-->
                            <v-img :src="$imgUrl+unreadNotifies[0].headImg"/>
                        </v-list-item-avatar>
                        <v-list-item-content>
                            <v-list-item-title class="subtitle-1 white--text">{{unreadNotifies.length}}条新消息
                            </v-list-item-title>
                        </v-list-item-content>
                        <v-list-item-action>
                            <v-icon>chevron_right</v-icon>
                        </v-list-item-action>
                        <!-- <v-icon>mdi-shield-lock-outline</v-icon>-->
                    </v-list-item>
                </v-card>
            </v-card-title>
        </v-card>

        <talk-item
                v-for="talk in talks"
                :ref="'talk_'+talk.id"
                :talk="talk"
                @scroll="scrollToTalk"
        ></talk-item>

        <msg-input>
        </msg-input>
    </u-col>
</template>

<script lang="ts">
  import {Vue, Component, Prop, Watch} from 'vue-property-decorator'
  import Talk from "@/model/Talk"
  import Comment from "@/model/Comment"
  import TalkAPI from "@/views/talk/TalkAPI"
  import {namespace} from "vuex-class"
  import TalkItem from "@/views/talk/item/TalkItem.vue"
  import User from "@/model/User"
  import UnreadNotify from "@/model/UnreadNotify"
  import RouterName from "@/const/RouterName"
  import talk from "@/plugins/store/talk"

  const talkModule = namespace('talk')
  const notifyModule = namespace('notify')

  /**
   * todo 需要支持发表情,数据库字段，img字段img改为了src, 所有被封禁的用户允许登录查看，但是不允许操作，提示账号已被封禁
   * 发说说的时候限制字符长度 140个字
   * 取消身份认证功能
   * 下拉刷新功能
   * 图片审核黄色图片等等
   * 查看个人信息
   * 常量int改为了string 匹配状态枚举.
   *看过了就是不喜欢，然后可以查看自己的不喜欢列表，然后可以在里面查询，按颜值排序，时间，等
   *
   * 被举报的列表，显示被举报的内容，投票是否违规，显示在你的仲裁庭里面。
   *
   * 如果你的是否点错了会有惩罚和奖励，清池币排名，否的话可以输入理由一个是也相当于一个举报？
   *
   * 举报类型里面加一个反对类型，
   *
   * 自己新建一个功能，显示出来被举报列表，然后同意，驳回，理由。
   *
   * 写出规则列表，
   *
   * 违规内容，关联内容
   *
   * 举报 类型，备注
   *
   *  其他类型，
   *
   *  以后再来个平台建设功能
   *
   *  所有用户 的版本号改为1 UPDATE USER u SET u.version_no = 1
   *  UPDATE user_img m SET m.`aspect_ratio` = 1/m.`aspect_ratio`
   *
   *  UPDATE match_request m SET m.`status` = 'like' WHERE m.`status` = 3
   *  除了已封禁的用户，所有用户改为未封禁，并且注册那里增加注册后为未封禁， UPDATE USER u SET u.violation = FALSE where violation!=true
   *
   *  宽高比写反了，需要数据库用1除以一下，然后代码改一下
   *
   *  用户部分版本号内容，修改后要记录
   *
   *  喜欢用户状态改为了string类型
   *
   *  修改所有用户被封禁次数为0
   */
  @Component({
    components: {TalkItem}
  })
  export default class TalkList extends Vue {
    content: string = ''
    talks: Talk[] = []
    @talkModule.State('talk') currentTalk: Talk
    @talkModule.State('comment') currentComment: Comment
    @talkModule.State('childComment') currentChildComment: Comment
    @talkModule.State('inputContentFocus') inputContentFocus: boolean
    @notifyModule.State('unreadNotifies') unreadNotifies: UnreadNotify[]
    drawer: boolean = false

    vueList: string[] = ['举报中心']/*, '社区建设'*/

    /* @Watch('inputContentFocus')
     watchInputContentFocus(){
       if (this.inputContentFocus){
         console.log(this.$refs['talk_'+this.currentTalk.id][0].$el.scrollHeight)
       }
     }*/

    created() {
      // @ts-ignore
      TalkAPI.queryTalks().then(res => {
        this.talks = res.data
      })
    }

    toNotifyVue() {
      console.log('点击了监听')
      this.$routerTo(RouterName.notify)
      this.$root.$emit('notifyVueRefresh')
    }

    sendComment(content) {
      this.$store.commit('talk/addComment', content)
    }

    scrollToTalk(talk: Talk) {
      window.scrollTo(0, this.$refs['talk_' + talk.id][0].$el.offsetTop + 56)
    }
  }
</script>
